<template>
  <view class="Page class">
    <view class="Header">
      <PageHeaderWithTitle
        v-if="title"
        :title="title"
        :disabledBack="disabledBack"
        :disabledHome="disabledHome"
      >
        <view slot="extra">
          <slot name="extra" />
        </view>
      </PageHeaderWithTitle>

      <slot else name="Header" />
    </view>
    <view
      :class="{ Body: true, [bodyClass]: true }"
      :style="{ background: bodyBackground || '' }"
    >
      <slot />
    </view>
  </view>
</template>
<script lang="ts">
import Vue from '@/utils/Vue';
import PageHeaderWithTitle from './PageHeaderWithTitle.vue';

interface IData {}

export default Vue.extend({
  data(): IData {
    return {};
  },
  components: {
    PageHeaderWithTitle,
  },
  props: {
    bodyClass: {
      type: String,
      default: '',
    },

    bodyBackground: {
      type: String,
      default: '',
    },
    /**
     * 页面标题
     */
    title: {
      type: String,
      default: '',
    },

    /**
     * 禁用返回
     */
    disabledBack: {
      type: Boolean,
      required: false,
    },

    /**
     * 禁用Home
     */
    disabledHome: {
      type: Boolean,
      required: false,
    },
  },
  methods: {},
  externalClasses: ['class'],
});
</script>
<style lang="less" scoped>
.Page {
  height: 100%;
  display: flex;
  flex-direction: column;

  .Header {
    flex-grow: 0;
    flex-shrink: 0;
  }

  .Body {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: rgb(243, 243, 243);
  }
}
</style>
